<!--
 * @Author: swc
 * @Date: 2024-11-28 16:33:36
 * @LastEditors: swc
 * @LastEditTime: 2024-11-29 16:05:43
 * @Description: oMultiSelector
 *
-->
<template>
  <div class="o-multi-selector">
    <div class="o-multi-box">
      <CheckboxGroup v-model="G_value" @on-change="onChange">
        <Checkbox
          :label="el.key"
          :border="el.border"
          v-for="(el, idx) in multiOptions"
          :key="idx"
          :title="$srv.getI18nBySrv(el.label)"
        >
          <!-- <Icon v-show="el.icon" :type="`wy-icon ${el.icon}`"></Icon> -->
          <span v-show="el.icon" :class="`wy-icon ${el.icon}`"></span>
          <span>{{ $srv.getI18nBySrv(el.label) }}</span>
        </Checkbox>
      </CheckboxGroup>
    </div>
  </div>
</template>
<script lang="ts">
import { Tsrv, T_srv, vue, ifs, ts } from '@/services';
import { N_input } from '@/types';

@T_srv.comp
export default class oMultiSelector extends vue {
  @T_srv.prop() renderOpts: N_input.I_renderOpts;

  @T_srv.prop() params: any;

  public G_compName: string = 'oMultiSelector';

  private G_value: Array<string | number> = [];

  // multiOptions 多选配置项
  private multiOptions: Array<N_input.I_multiOption>;

  private G_paramsFromComp: 'oBaseGrid' | 'oBaseForm' | 'oBasePanel' = null;

  private currFieldName: string = '';

  @T_srv.watch('params')
  onParamsChange(val) {
    this.initProps();
    this.setValue();
  }

  created() {
    if (this.renderOpts.props.getTcommand()?.oBaseGrid?.G_compName) {
      this.G_paramsFromComp = 'oBaseGrid';
      this.currFieldName = this.params.column.property;
    } else if (this.renderOpts.props.getTcommand()?.oBaseForm?.G_compName) {
      this.G_paramsFromComp = 'oBaseForm';
      this.currFieldName = this.params.property;
    } else if (this.renderOpts.props.getTcommand()?.oBasePanel?.G_compName) {
      this.G_paramsFromComp = 'oBasePanel';
      this.currFieldName = this.params.property;
    } else {
      this.$msg({});
      console.error('未定义的组件');
    }
    if (Tsrv.noValue(this.currFieldName)) {
      this.$msg(Tsrv.getI18nByValue('获取不到当前字段名'));
    }
    this.init();
  }

  mounted() {}

  /**
   * @Author: ssj
   * @description: 初始化
   */
  private init(): void {
    this.initProps();
    let val;
    if (this.G_paramsFromComp === 'oBaseGrid') {
      val = this.params.row[this.currFieldName];
    } else if (this.G_paramsFromComp === 'oBaseForm') {
      val = this.params.data[this.currFieldName];
    } else if (this.G_paramsFromComp === 'oBasePanel') {
      val = this.params.data[this.currFieldName];
    }
    if (Tsrv.noValue(val)) {
      this.setValue('[]');
      return;
    }
    this.setValue(val); // val
  }

  private initProps(): void {
    this.multiOptions = this.renderOpts.props.multiOptions;
  }

  /**
   * @Author: ssj
   * @description: 重置value
   */
  public resetValue(): void {
    this.setValue(null);
  }

  public setValue(val: null | string | undefined = undefined): void {
    const err = () => {
      this.$msg('-530,FE,90');
      console.error('json表达式不是一个数组');
    };
    if (Tsrv.utils.noValue(val)) {
      this.G_value = [];
    } else {
      if (typeof val === 'string') {
        try {
          const v: Array<string | number> = JSON.parse(val) || [];
          if (Array.isArray(v)) {
            this.G_value = v;
          } else {
            err();
          }
        } catch {
          err();
        }
      } else if (typeof val === 'object') {
        Array.isArray(val) && (this.G_value = val);
      } else {
        err();
      }
    }
    this.setTableValue();
    this.emitEvent('dochange');
  }

  /**
   * @Author: ssj
   * @description: 修改表值
   */
  public setTableValue(): void {
    if (this.currFieldName) {
      if (this.G_paramsFromComp === 'oBaseGrid') {
        this.params.row[this.params.column.field] = Tsrv.utils.toJSONString(
          this.G_value
        );
      } else if (this.G_paramsFromComp === 'oBaseForm') {
        this.params.data[this.currFieldName] = Tsrv.utils.toJSONString(
          this.G_value
        );
      } else if (this.G_paramsFromComp === 'oBasePanel') {
        this.params.data[this.currFieldName] = Tsrv.utils.toJSONString(
          this.G_value
        );
      }
    }
  }

  /**
   * @Author: ssj
   * @description: 获取value
   */
  public getValue(): any {
    return this.G_value;
  }

  private onChange() {
    this.setTableValue();
    this.emitEvent('dochange');
  }

  /**
   * @Author: ssj
   * @param {string} event 发送事件名
   * @description: 发送事件
   */
  public emitEvent(event: string): void {
    const ev: any = this.renderOpts.events;
    const params = Tsrv.utils.cloneNoMatchVue(this.params, true);
    params.from = 'inputtext';
    for (const action in ev) {
      if (ev[action] && action === `on-${event}`) {
        ev[action](params);
      }
    }
    this.$emit('model-change', this.G_value);
    this.$emit('on-change', this.G_value);
  }
}
</script>

<style scoped lang="scss">
.o-multi-selector {
  border-bottom: 1px solid var(--default-border-color);
  padding: 3px;
  background-color: #fff;
  display: flex;
  align-items: center;
  // height: 80px;
  width: 100%;
  overflow: hidden;
  .o-multi-box {
    overflow: hidden;
    .ivu-checkbox-group {
      // display: flex;
      // flex-direction: row;
      // justify-content: space-around;
      // flex-wrap: nowrap;
      .ivu-checkbox-wrapper {
        // white-space: nowrap;
        // line-height: 2.5;
      }
    }
  }
}
</style>
